<template>
  <!-- 三级分类全局组件 -->
  <Category />
  <!-- 属性添加和展示卡片 -->
  <el-card :style="{ margin: '10px 0px' }">
    <!-- 属性内容显示 -->
    <div v-show="scene == 0">
      <el-button
        type="primary"
        size="default"
        icon="Plus"
        :disabled="categoryStore.c3Id ? false : true"
        @click="addAttr"
      >
        添加属性
      </el-button>
      <el-table border style="margin: 10px 0px" :data="attrArr">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="属性名称"
          width="120px"
          prop="attrName"
        ></el-table-column>
        <el-table-column label="属性值名称">
          <!-- row：已有的属性对象 -->
          <template #="{ row, $index }">
            <el-tag
              style="margin: 5px"
              v-for="(item, index) in row.attrValueList"
              :key="item.id"
            >
              {{ item.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <!-- row：已有的属性对象 -->
          <template #="{ row, $index }">
            <!-- 修改已有属性的按钮 -->
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              @click="updateTrademark(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Delete"
              @click="deleteAttrById(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="scene == 1">
      <!-- 新增修改属性显示 -->
      <el-form :inline="true">
        <el-form-item label="属性名称">
          <el-input
            placeholder="请输入属性名称"
            v-model="attrParams.attrName"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        :disabled="attrParams.attrName ? false : true"
        size="default"
        icon="Plus"
        @click="addAttrValue"
      >
        添加属性值
      </el-button>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
      <el-table
        border
        style="margin: 10px 0px"
        :data="attrParams.attrValueList"
      >
        <el-table-column
          label="序号"
          width="80px"
          type="index"
          align="center"
        />
        <el-table-column label="属性名称">
          <!-- row:即为当前属性值对象 -->
          <template #="{ row, $index }">
            <el-input
              :ref="(vc: any) => inputArr[$index] = vc"
              v-if="row.flag"
              @blur="toLook(row, $index)"
              size="small"
              placeholder="请你输入属性值名称"
              v-model="row.valueName"
            ></el-input>
            <div v-else @click="toEdit(row, $index)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="属性值操作">
          <template #="{ row, index }">
            <el-button
              type="primary"
              size="small"
              icon="Delete"
              @click="attrParams.attrValueList.splice(index, 1)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        size="default"
        @click="save"
        :disabled="attrParams.attrValueList.length > 0 ? false : true"
      >
        保存
      </el-button>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { watch, ref, reactive, nextTick } from 'vue'

import {
  reqAttr,
  reqAddOrUpdateAttr,
  deleteAttr,
} from '../../../api/product/attr/index'

import type {
  AttrResponseData,
  Attr,
  AttrValue,
} from '../../../api/product/attr/type'

import useCategoryStore from '../../../store/modules/category'

import { ElMessage, ElMessageBox } from 'element-plus'

let categoryStore = useCategoryStore()

//存储已有的属性与属性值
let attrArr = ref<Attr[]>([])

// 收集新增的属性的数据
let attrParams = reactive<Attr>({
  attrName: '', // 新增属性的名字
  attrValueList: [], // 新增属性的值列表
  categoryId: '', // 三级分类的ID
  categoryLevel: 3, // 分类的层级
  id: null, // 修改属性时需要传递ID
})

//监听仓库三级分类ID变化
watch(
  () => categoryStore.c3Id,
  () => {
    // 清空上一次查询的属性与属性值
    attrArr.value = []
    if (!categoryStore.c3Id) return
    //获取分类的ID
    getAttr()
  },
)

//获取已有的属性与属性值方法
const getAttr = async () => {
  const { c1Id, c2Id, c3Id } = categoryStore
  //获取分类下的已有的属性与属性值
  let result: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id)
  console.log(result)

  if (result.code == 200) {
    attrArr.value = result.data
  }
}

//定义card组件内容切换变量
let scene = ref<number>(0) //scene=0,显示table,scene=1,展示添加与修改属性结构

// 添加属性按钮回调方法
const addAttr = () => {
  //清空上一次添加的属性数据
  Object.assign(attrParams, {
    id: null,
    //id: '',
    attrName: '',
    attrValueList: [],
    categoryId: categoryStore.c3Id,
    categoryLevel: 3,
  })
  scene.value = 1
}

//取消按钮的回调
const cancel = () => {
  scene.value = 0
}

//属性值div点击事件
const toEdit = (row: AttrValue, $index: number) => {
  //相应的属性值对象flag:变为true,展示input
  row.flag = true
  //nextTick:响应式数据发生变化,获取更新的DOM(组件实例)
  nextTick(() => {
    inputArr.value[$index].focus()
  })
}

//准备一个数组:将来存储对应的组件实例el-input
let inputArr = ref<any>([])

//属性值表单元素失却焦点事件回调
const toLook = (row: AttrValue, $index: number) => {
  //非法情况判断1
  if (row.valueName.trim() == '') {
    //删除调用对应属性值为空的元素
    attrParams.attrValueList.splice($index, 1)
    //提示信息
    ElMessage({
      type: 'error',
      message: '属性值不能为空',
    })
    return
  }
  //非法情况2
  let repeat = attrParams.attrValueList.find((item) => {
    //切记把当前失却焦点属性值对象从当前数组扣除判断
    if (item != row) {
      return item.valueName === row.valueName
    }
  })

  if (repeat) {
    //将重复的属性值从数组当中干掉
    attrParams.attrValueList.splice($index, 1)
    //提示信息
    ElMessage({
      type: 'error',
      message: '属性值不能重复',
    })
    return
  }
  //相应的属性值对象flag:变为false,展示div
  row.flag = false
}

//保存按钮的回调
const save = async () => {
  //发请求
  let result: any = await reqAddOrUpdateAttr(attrParams)
  //添加属性|修改已有的属性已经成功
  if (result.code == 200) {
    //切换场景
    scene.value = 0
    //提示信息
    ElMessage({
      type: 'success',
      message: attrParams.id ? '修改成功' : '添加成功',
    })
    //获取全部已有的属性与属性值
    getAttr()
  } else {
    ElMessage({
      type: 'error',
      message: attrParams.id ? '修改失败' : '添加失败',
    })
  }
}

//添加属性值按钮的回调
const addAttrValue = () => {
  //点击添加属性值按钮的时候,向数组添加一个属性值对象
  attrParams.attrValueList.push({
    valueName: '',
    flag: true, //控制每一个属性值编辑模式与切换模式的切换
  })
  //获取最后el-input组件聚焦
  nextTick(() => {
    inputArr.value[attrParams.attrValueList.length - 1].focus()
  })
}

// 修改已有属性值按钮回调
const updateTrademark = (row: Attr) => {
  //console.log(row)
  // 显示对话框
  scene.value = 1
  // 使用 Object.assign 方法将 row 的属性复制到 attrParams
  Object.assign(attrParams, {
    id: row.id,
    attrName: row.attrName,
    attrValueList: row.attrValueList.map((item) => ({
      ...item,
      flag: false, // 初始化时设置 flag 为 false
    })),
    categoryId: categoryStore.c3Id,
    categoryLevel: 3,
  })
}

// 添加删除属性的方法
const deleteAttrById = async (id: number) => {
  ElMessageBox.confirm('是否删除该属性？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      // 调用删除接口
      const result: any = await deleteAttr(id)
      if (result.code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        // 重新获取属性列表
        getAttr()
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败',
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}
</script>

<style lang="scss" scoped></style>
